<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <style type="text/css">
        #control{
            width: 550px;
            height: 20px;
            margin: 10px auto;
        }
        #control a{
            margin: 10px 100px;
            font-size: 20px;
            color:brown;
        }
        #calendar{
            width: 1090px;
            margin-left: 50px;
            list-style: none;
            padding: 0px;
            background-color:white;
        }
        #calendar  li{
            width: 138px;
            height:88px;
            float: left;
            border: 1px solid lavender;
            color: black;
            font-size: 15px;
            margin: 1px 1px;
        }
        #calendar  li ul{
            list-style: none;
            width: 110px;
            padding: 0px;
        }
        #calendar  li ul li{
            width: 110px;
            height:20px;
            margin: 0px 10px;
            border: 0px;

        }

        table{
            width: 600px;
            margin: auto;
            text-align: center;
        }

        td{
            width:70px;
        }


    </style>
</head>
<body>


<!--配置权限-->
<form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">部门人员</label>
        <div class="layui-input-inline">
            <select name="modules"  lay-filter="required" lay-search="" id="find">
                <option th:value="${session.user.id}" th:text="${session.user.name}" selected></option>
                <option value="2">王森明</option>
            </select>
        </div>
    </div>
    </div>
</form>


<div id="control">
    <a id="prevm" href="javascript:void(0);">上一月</a>
    <a id="nextm" href="javascript:void(0);">下一月</a>
</div>
<div style="margin: auto;width: 880px; text-align: center;font-size: 20px;color: palegreen;margin-bottom: 10px;">
    <span id="year"></span>
    <span id="month"></span>
</div>
<table>
    <tr>
        <td>未开始</td>
        <td style="background-color: blue"></td>
        <td></td>

        <td>进行中</td>
        <td style="background-color: green"></td>
        <td></td>

        <td>已逾期</td>
        <td style="background-color: red"></td>
        <td></td>

        <td>已完成</td>
        <td style="background-color: gray"></td>
        <td></td>
    </tr>
</table>
<ul id="calendar" style="margin: auto">

</ul>
<ul class="menu" id="menu">
    <li id="append"><span>添加计划</span></li>
    <li id="read"><span>查看今日计划</span></li>
</ul>
<script th:inline="javascript">

    var sid=[[${session.user.id}]];
    var date = new Date();
    var year=date.getFullYear();
    var month=date.getMonth();
    var day =date.getDate();


    var todays ;
    if(month<9&&day<10){
        todays=  year+"0"+(month+1)+"0"+day;
    }else if(month<9&&day>=10){
        todays=  year+"0"+(month+1)+""+day;
    }else if(month>=9&&day<10){
        todays=  year+""+(month+1)+"0"+day;
    }else{
        todays=  year+""+(month+1)+""+day;
    }

    todays =parseInt(todays);


    var days =["日","一","二","三","四","五","六"];

    //制作表格
    $(function () {
        change();
    });


    function prev(){
        month--;
        if(month==-1){
            month=11;
            year--;
        }
    }

    function next() {
        month++;
        if (month==12){
            month=0;
            year++;
        }
    }

    //改变日历内容
    function change(){
        $("#year").html(year +"年  ")
        $("#month").html((month+1)+"月")

        $("#calendar").children().remove();
        var t1=new Date(year,month,1);
        var t2=new Date(year,month+1,1);

        var firstday =t1.getDay();


        var t =(t2.getTime()-t1.getTime())/1000/60/60/24;

        for(var i=0;i<7;i++){
            var li =$("<li>"+days[i]+"</li>");
            li.css("height","20px")
            li.css("text-align","center")
            li.css("background-color","lightblue")
            $("#calendar").append(li);
        }
        for(var i=0;i<firstday;i++){

            var li =$("<li></li>");
            $("#calendar").append(li);
        }

        for(var i=1;i<=t;i++){

            var li =$("<li><span style='margin-left:50px;'>"+i+"</span><ul></ul></li>");
            if(month<9&&i<10){
                li.attr("id",year+"0"+(month+1)+"0"+i);
            }else if(month<9&&i>=10){
                li.attr("id",year+"0"+(month+1)+""+i);
            }else if(month>=9&&i<10){
                li.attr("id",year+""+(month+1)+"0"+i);
            }else{
                li.attr("id",year+""+(month+1)+""+i);
            }

            var ul =$("<ul></ul>");

            var li1 =$("<li class='w1' style='color:blue;'>●<span>(</span><span id='count'>0</span><span>)</span></li>")
            var li2 =$("<li class='w2' style='color:green;'>●<span>(</span><span id='count'>0</span><span>)</span></li>")
            var li3 =$("<li class='w3' style='color:red;'>●<span>(</span><span id='count'>0</span><span>)</span></li>")
            var li4 =$("<li class='w4' style='color:gray;'>●<span>(</span><span id='count'>0</span><span>)</span></li>")


            ul.append(li1)
            ul.append(li2)
            ul.append(li3)
            ul.append(li4)

            li.append(ul);
            $("#calendar").append(li);
        }
        getpl();

    };

    //上一月 下一月点击方法
    $(function () {
        $("#prevm").click(function () {
            $("#menu").css("display","none")
            prev();
            change();
            today();

            return false;
        })

        $("#nextm").click(function () {
            $("#menu").css("display","none")
            next();
            change();
            today();

            return false;
        })

    })

    //今天函数
    function today() {
        var lis =$("li[id^=2]");

        lis.each(
            function () {
                if(date.getMonth()<9&&date.getDate()<10){
                    if(date.getFullYear()+"0"+(date.getMonth()+1)+"0"+date.getDate() == $(this).attr("id") )
                    {
                        $(this).css("background-color","lightblue")
                    }
                }else if(date.getMonth()<9&&date.getDate()>=10){
                    if(date.getFullYear()+"0"+(date.getMonth()+1)+""+date.getDate() == $(this).attr("id") )
                    {
                        $(this).css("background-color","lightblue")
                    }
                }else if(date.getMonth()>=9&&date.getDate()<10){
                    if(date.getFullYear()+""+(date.getMonth()+1)+"0"+date.getDate() == $(this).attr("id") )
                    {
                        $(this).css("background-color","lightblue")
                    }
                }else{
                    if(date.getFullYear()+""+(date.getMonth()+1)+""+date.getDate() == $(this).attr("id") )
                    {
                        $(this).css("background-color","lightblue")
                    }
                }

            }
        )
    }
    //判断哪天是今天
    $(function () {
        today();
    })

    //循环添加
    function setPlans(startTime,endTime,enable){
        var lis =$("li[id^=2]");
        lis.each(function () {

            var id =parseInt($(this).attr("id"));

            if(startTime<=id&&id<=endTime){
              if(enable==0){
               var count= $(this).find("ul").find(".w1").find("#count").html();

               count =parseInt(count);
               count++;

               $(this).find("ul").find(".w1").find("#count").html(count)

              }else if(enable==1){
                  var count= $(this).find("ul").find(".w2").find("#count").html();

                  count =parseInt(count);
                  count++;

                  $(this).find("ul").find(".w2").find("#count").html(count)

              }else if(enable==2){
                  var count= $(this).find("ul").find(".w3").find("#count").html();

                  count =parseInt(count);
                  count++;

                  $(this).find("ul").find(".w3").find("#count").html(count)

              }else if(enable==3){
                  var count= $(this).find("ul").find(".w4").find("#count").html();

                  count =parseInt(count);
                  count++;

                  $(this).find("ul").find(".w4").find("#count").html(count)

              }


            }
        })
    }
    //获得当前月的工作内容
    function getpl() {
        $.ajax({
            url: "/dailyplan/plans",
            type: "post",
            data: {year: year, month: month + 1, id:sid},
            dataType: "json",
            success: function (json) {

                for (var i = 0; i < json.data.length; i++) {
                    var startTime = parseInt(json.data[i].startTime);
                    var endTime = parseInt(json.data[i].endTime);

                    setPlans(startTime, endTime,json.data[i].enable)
                }
                  var spans =$("span[id=count]");

                   spans.each(function () {
                    var ht =$(this).html();
                    if(ht==0){
                       $(this).parent().css("display","none")
                    }else{
                        $(this).parent().css("display","block")
                    }
                })
            }
        })
    }

</script>
<style>

    .menu {
        width: 150px;
        border: 1px solid #ccc;
        position: absolute;
        display: none;
        padding: 0px;
        background-color: #fff;
        font-size: 15px;
    }
    .menu li {
        list-style: none;
        margin-top: 5px;
        width: 100%;
    }
    .menu li span {
        display: inline-block;
        text-decoration: none;
        color: #000;
        width: 100%;
        padding: 10px 10px;
        text-align: left;
        cursor: pointer;
    }
    .menu li:first-of-type {
        border-radius: 5px 5px 0 0;
    }
    .menu li span:hover{
        background: #fff;
        color: #CC1A1A;
    }

</style>

<script>
    //右键点击事件跳转
    var calen ;

    $("#read").on("click",function () {
        var y =calen.toString().substring(0,4);
        var m =calen.toString().substring(4,6);
        var d =calen.toString().substring(6,8);

        var da =y+"-"+m+"-"+d;
        location.href="/dailyplan/dayPlan?date="+da+"&sid="+sid;
    })

    $("#append").on("click",function () {
        var y =calen.toString().substring(0,4);
        var m =calen.toString().substring(4,6);
        var d =calen.toString().substring(6,8);

        var da =y+"-"+m+"-"+d;
        location.href="/dailyplan/addPlan?date="+da+"&sid="+sid;
    })
</script>
<script>

    // 获取节点
    var menu = document.getElementById('menu');
    var append = document.getElementById('append');


    //获取可视区宽度,高度
    var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var winHeight = document.documentElement.clientHeight || document.body.clientHeight;


    function right() {
        // 点击空白区域 隐藏菜单
        $(document).on('click', function () {
            menu.style.display = 'none';
            menu.style.left = 0 + 'px';
            menu.style.top = 0 + 'px';

        })
        $(document).on('contextmenu', function () {
            menu.style.display = 'none';
            menu.style.left = 0 + 'px';
            menu.style.top = 0 + 'px';
        })


        //右键菜单
        $("#calendar").on( "contextmenu","li[id^=2]",function (e) {
                calen=$(this).attr("id");
                var cal =parseInt(calen);

                if(cal<todays){
                    append.style.display = 'none';
                }else{
                    append.style.display = 'block';
                }

                var e = e || window.event;
                menu.style.display = 'block';
                // 获取鼠标坐标
                var mouseX = e.clientX;
                var mouseY = e.clientY;

                // 判断边界值，防止菜单栏溢出可视窗口

                if (mouseX >= (winWidth - menu.offsetWidth)) {
                    mouseX = winWidth - menu.offsetWidth;
                } else {
                    mouseX = mouseX
                }
                if (mouseY > winHeight - menu.offsetHeight) {
                    mouseY = winHeight - menu.offsetHeight;
                } else {
                    mouseY = mouseY;
                }

                menu.style.left = mouseX + 'px';
                menu.style.top = mouseY+document.documentElement.scrollTop + 'px';

                return false;
            }
        )
    }

    $(right)
</script>



<script>

    layui.use(['form','jquery'], function(){
        var form = layui.form;
        var $ =layui.jquery;

        form.on('select(required)', function(data){
                    sid =data.value;//得到被选中的值
                    change();
                    today();
               })
    });
</script>
</body>
</html>